import { MciSvgIcon } from '@/components/base';
import { ElTooltip, ElPopover } from 'element-plus';
import { AddDecisionLeaf } from '../AddDecisionLeaf';
import { CopyDecisionLeaf } from '../CopyDecisionLeaf';

export const DecisionLeafMore = defineComponent({
  props: {
    // adminBtn: {
    //   type: Boolean,
    //   default: false
    // },
    parentId: {
      type: String,
      default: ''
    },
    parentName: {
      type: String,
      default: ''
    },
    flowId: {
      type: String,
      default: ''
    },
    flowName: {
      type: String,
      default: ''
    },
    flowDesc: {
      type: String,
      default: ''
    },
    versionFlow: {
      type: Object,
      default: () => {}
    },
    permissionRoles: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['refreshList'],
  setup(props, { emit }) {
    const visible = ref(false);
    // 复制决策
    const visibleCopy = ref(false);

    return () => (
      <>
        <div class="flex gap-12">
          {/* {props.adminBtn && ( */}
            <ElPopover popperClass="popover-node-list" trigger="click">
              {{
                reference() {
                  return (
                    <div onClick={(e) => e.stopPropagation()} class="cursor-pointer">
                      <ElTooltip placement="bottom" content="更多">
                        <MciSvgIcon name="more" class="cursor-pointer" />
                      </ElTooltip>
                    </div>
                  );
                },
                default() {
                  return (
                    <div class="flex flex-col gap-2 node-list">
                      {props.permissionRoles?.configRole && (
                        <div
                          class="flex items-center base-node-content"
                          onClick={(e) => {
                            visible.value = true;
                            e.stopPropagation();
                          }}>
                          <MciSvgIcon name="edit" width={18} class="ml-8" color="let(--color-grey-4)" />
                          <span class="label ml-8">修改名称及说明</span>
                        </div>
                      )}
                      {props.permissionRoles?.configRole && (
                        <div
                          class="flex items-center base-node-content"
                          onClick={(e) => {
                            visibleCopy.value = true;
                            e.stopPropagation();
                          }}>
                          <MciSvgIcon name="copy" width={18} class="ml-8" color="let(--color-grey-4)" />
                          <span class="label ml-8">复制决策</span>
                        </div>
                      )}

                      {/* {props.permissionRoles?.configRole && (
                        <div
                          class="flex items-center base-node-content"
                          onClick={deleteMenu}>
                          <MciSvgIcon name="setting" width={18} class="ml-8" color="let(--color-grey-4)" />
                          <span class="label ml-8">删除</span>
                        </div>
                      )} */}
                    </div>
                  );
                }
              }}
            </ElPopover>
          {/* )} */}
        </div>

        {visible.value && (
          <AddDecisionLeaf
            title="修改名称及说明"
            flowDesc={props.flowDesc}
            flowName={props.flowName}
            flowId={props.flowId}
            onUpdate:modelValue={(val) => {
              visible.value = val;
            }}
            onRefreshList={(refresh: boolean) => {
              visible.value = false;
              emit('refreshList', refresh);
            }}
          />
        )}
        {visibleCopy.value && (
          <CopyDecisionLeaf
            title="复制决策"
            parentId={props.parentId}
            flowDesc={props.flowDesc}
            flowName={`${props.flowName}（复制）`}
            flowId={props.flowId}
            versionFlow={props.versionFlow}
            onUpdate:modelValue={(val) => {
              visibleCopy.value = val;
            }}
            onRefreshList={() => {
              visibleCopy.value = false;
              emit('refreshList');
            }}
          />
        )}
      </>
    );
  }
});
